<template>
  <div class="balance">
    <h2>账户余额</h2>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>当前余额</span>
        </div>
      </template>
      <div class="balance-amount">
        ¥ {{ balance.toFixed(2) }}
      </div>
    </el-card>
    <el-button type="primary" @click="recharge" style="margin-top: 20px;">充值</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const balance = ref(100.00);

const recharge = () => {
  // 这里添加充值逻辑
  ElMessage.info('跳转到充值页面');
};
</script>

<style scoped>
.balance-amount {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}
</style>
